<template>
  <el-dialog
      model-value="persistentVolumeCreateDialogVisible"
      title="创建"
      width="30%"
      @close="handleClose"
  >

    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="存储容量" prop="capacity">
        <el-radio-group v-model="form.capacity">
          <el-radio :label="1" value="1Gi">1Gi</el-radio>
          <el-radio :label="2" value="5Gi">5Gi</el-radio>
          <el-radio :label="3" value="10Gi">10Gi</el-radio>
          <el-radio :label="4" value="20Gi">20Gi</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="访问模式" prop="access_mode">
        <el-radio-group v-model="form.access_mode">
          <el-radio :label="1" value="ReadWriteMany">多节点读写</el-radio>
          <el-radio :label="2" value="ReadOnlyMany">多节点只读</el-radio>
          <el-radio :label="3" value="ReadWriteOnce">单节点读写</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="存储类型" prop="storage_type">
        <el-radio-group v-model="form.storage_type">
          <el-radio :label="1" value="NFS">NFS</el-radio>
        </el-radio-group>
      </el-form-item>
    <el-form-item label="服务器IP">
      <el-select v-model="form.storage_ip" placeholder="请选择服务器IP">
        <el-option label="192.168.15.126" value="192.168.15.126" />
      </el-select>
    </el-form-item>
      <el-form-item label="共享路径" prop="storage_share_path">
        <el-input v-model="form.storage_share_path"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {defineEmits, defineProps, ref, watch} from "vue";
import requestUtil from "@/util/request";
import {ElMessage} from 'element-plus'

const props = defineProps({
      persistentVolumeCreateDialogVisible: {
        type: Boolean,
        default: false,
        required: true
      }
    }
)


const form = ref({
  name: "",
  capacity: "1Gi",
  access_mode: "ReadWriteMany",
  storage_type: "NFS",
  storage_ip: "192.168.15.126",
  storage_share_path: "/nfs",
})



const rules = ref({
  name: [
    {required: true, message: '请输入名称', trigger: "blur"},
  ],
})

const formRef = ref(null)

const emits = defineEmits(['update:modelValue', 'initUserList'])

const handleClose = () => {
  emits('update:modelValue', false)
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value,111)
      let result = await requestUtil.post("storage/pv_api", form.value);
      let data = result.data;
      if (data.code === 200) {
        ElMessage.success(data.msg)
        formRef.value.resetFields();
        emits("initUserList")
        handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    } else {
      console.log("fail")
    }
  })
}

</script>

<style scoped>

</style>
